import useStore from '@/context/useStore';
import { ISkillAddItem } from '@/utils/interface.d';
import { Button, Form, Input, Select, Slider } from 'antd'
import { SendOutlined, SaveOutlined } from '@ant-design/icons'
import {observer} from 'mobx-react-lite'
import { useEffect } from 'react';
import {IRouteComponentProps} from 'umi'
import SkillDescription from '@/components/skillDescription'
import style from './addPostSkill.less'

// 定义节点需要有的字段
interface IDescriptionData {
    key: string;
    title: string;
    rate: number;
    content: string;
    isEdit:boolean;
    length: number;
    children?: IDescriptionData[]
}
const AddPostSkill: React.FC<IRouteComponentProps> = ({history,location}) => {
    // 从url参数中获取stationVersionId
    let stationVersionId = location.query.stationVersionId;

    // 获取仓库的skill模块
    let { skill } = useStore();

    // 创建表单实例
    const [form] = Form.useForm();

    useEffect(() => {
        if (stationVersionId){
            skill.getSkillDetail(stationVersionId as string);
        }
    }, [stationVersionId])

    useEffect(() => {
        form.setFieldsValue({
            ...skill.skillAddItem, ...skill.skillAddItem.stationLevelList[0]
        })
    }, [skill.skillAddItem]);

    async function addPostSkill(res: ISkillAddItem){
        let stationVersionId = await skill.addPostSkill(res);
        history.replace(`/teachers/addPostSkill?stationVersionId=${stationVersionId}&see=false`)
    }
    console.log('skillAddItem...', skill.skillAddItem);

    return <div className={style.box}>
        <section className={style.header1}>
            <h3>添加岗位能力</h3>
            <Button>返回</Button>
            <Button type="primary" icon={<SendOutlined/>}>提交审核</Button>
        </section>
        <section className={style.from}>

            <Form form={form} key={JSON.stringify(skill.skillAddItem)} initialValues={{...skill.skillAddItem, ...skill.skillAddItem.stationLevelList[0]}}  onFinish={addPostSkill}>
                <h3 className={style.header2}>基本信息<Button type="text" icon={<SaveOutlined />} htmlType="submit">保存</Button></h3>
                <Form.Item className={style.main_h} label="岗位名称" name="name" rules={[{ required: true, message: "请输入岗位名称" }]}>
                    <Input />
                </Form.Item>
                <Form.Item  className={style.main_h} label="专业" name="majorId" rules={[{ required: true, message: "请选择专业" }]}>
                    <Select>{
                        skill.skillLable.map(item => {
                            return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                        })
                    }</Select>
                </Form.Item>
                <Form.Item className={style.main_h} label="版本号 V" name="stationVersion" rules={[{ required: true, message: "请输入版本号" }]}>
                    <Input type="number" />
                </Form.Item>
                <Form.Item  className={style.span} label="作者" name="userName" >
                    <span>郭老师</span>
                </Form.Item>
                <div></div>
                <Form.Item className={style.main_m} label="薪酬范围" name="salaryList" rules={[{ required: true, message: "请输入薪酬范围" }]}>
                    <Slider className={style.slidre} range min={0} max={50000} />
                </Form.Item>
                <Form.Item  className={style.main_m}label="岗位描述" name="describes" rules={[{ required: true, message: "请输入岗位描述" }]}>
                    <Input type="textarea" placeholder="请输入岗位描述"></Input>
                </Form.Item>
                <Form.Item  className={style.main_m}label="岗位任务" name="stationTask" >
                    <Input type="textarea" placeholder="请输入岗位任务"></Input>
                </Form.Item>
            </Form>
        </section>

        <section>
            {stationVersionId?<SkillDescription stationVersionId={stationVersionId}/>:null}
        </section>
    </div>
}

export default observer(AddPostSkill)